<template>
  <div>
    <fixedheader title="首单商品详情" right-icon="icon-more"></fixedheader>
    <div class="good" ref="good">
      <div class="good-content">
        <div class="image-header">
          <swipe :swiperSlides="swiperSlides"></swipe>
        </div>
        <div class="content">
          <h1 class="title">{{firstpay.name}}</h1>
          <div class="price">
            <span class="now">¥{{getGoodPrice}}</span><span class="old" v-show="firstpay.fieldPrice !== firstpay.buttomFee">¥{{firstpay.fieldPrice}}</span>
          </div>
          <div v-if="firstpay.stock">
            <div class="row">
              <div class="label">商品库存：</div>
              <div class="desc">{{firstpay.stock || 0}}</div>
            </div>
            <div class="row" v-if="good.deliveryDays">
              <div class="label">预计发货：</div>
              <div class="desc">{{good.deliveryDays}}天</div>
            </div>
          </div>
          <div class="cartcontrol-wrapper" v-if="userProfile.hasFirst && firstpay.count">
            <cartcontrol @add="addGood" :good="firstpay" :maxCount="1" :stock="firstpay.stock"></cartcontrol>
          </div>
          <transition name="fade">
            <div @click.stop.prevent="addFirst" class="buy" v-if="userProfile.hasFirst && firstpay.stock && !firstpay.count">加入购物车</div>
          </transition>
        </div>
        <split v-show="good.content"></split>
        <div class="info" v-if="good.videoUrl || (good.videos && good.videos.length)">
          <h1 class="title">商品视频</h1>
          <div class="player">
            <div id="tencent_video_player" v-if="good.videos && good.videos.length">
              <video oncontextmenu="return false;" controls="controls" x-webkit-airplay="true" webkit-playsinline="true" playsinline="" width="100%" height="100%" poster="http://www.yihuyixi.com/ps/download/5a4c7ceae4b065c96d6562dc" v-for="v in good.videos">
                <source :src="v.url" type="video/mp4">
              </video>
            </div>
            <div id="tencent_video_player" v-else-if="good.videoUrl">
              <video oncontextmenu="return false;" controls="controls" x-webkit-airplay="true" webkit-playsinline="true" playsinline="" width="100%" height="100%" poster="http://www.yihuyixi.com/ps/download/5a4c7ceae4b065c96d6562dc">
                <source :src="good.videoUrl" type="video/mp4">
              </video>
            </div>
          </div>
        </div>
        <split v-if="good.videoUrl"></split>
        <div class="intro" v-show="good.content">
          <h1 class="title">商品介绍<span class="toolbar" @click.stop.prevent="showQrcode"><i class="icon-qrcode"></i></span></h1>
          <div class="sellpoint" v-if="good.sellPoint">{{good.sellPoint}}</div>
          <div class="text" v-html="good.content" ref="goodContent" id="productIntro"></div>
        </div>
        <split v-if="good.parameter"></split>
        <div class="info" v-if="good.parameter">
          <h1 class="title">商品参数</h1>
          <div class="text">
            <table class="table">
              <tr v-for="p in good.parameter" v-if="p.value">
                <td>{{p.text}}</td>
                <td class="adjustText"><pre v-html="p.value"></pre></td>
              </tr>
            </table>
          </div>
        </div>
        <split v-if="good.ratings && good.ratings.length"></split>
        <div class="rating" v-if="good.ratings && good.ratings.length">
          <h1 class="title">商品评论</h1>
          <!--<ratingselect @select="selectRating" @toggle="toggleContent" :select-type="selectType" :only-content="onlyContent" :desc="desc" :ratings="good.ratings"></ratingselect> -->
          <div class="rating-wrapper">
            <ul>
              <li class="rating-item" v-for="rating in good.ratings" v-show="needShow(rating.score, rating.content)">
                <div class="user">
                  <img src="http://www.yihuyixi.com/ps/download/5959abcae4b00faa50475a10" width="20" height="20" alt="" class="avatar">
                  <span class="name">{{rating.from.userName | mix}}</span>
                </div>
                <div class="time">{{rating.createdAt | formatDate}}</div>
                <p class="text">
                  <star size="24" :score="rating.score"></star>{{rating.content}}
                </p>
                <ul class="piclist" v-if="rating.pictures && rating.pictures.length">
                  <li v-for="pic in rating.pictures" :class="getPicCls(rating)">
                    <img :src="getPicture(pic.pid) + '?h=90'" :data-img="getPicture(pic.pid)" height="90" v-if="rating.pictures.length === 1 || rating.pictures.length === 2 || rating.pictures.length === 4" @click.stop.prevent="previewImg(rating.pictures, pic)" />
                    <img :src="getThumbnail(pic.pid)" :data-img="getPicture(pic.pid)" width="90" height="90" v-else-if="rating.pictures.length === 3 || rating.pictures.length >= 5" @click.stop.prevent="previewImg(rating.pictures, pic)" />
                  </li>
                </ul>
                <ul v-if="rating.replys && rating.replys.length" class="reply-item">
                  <li class="rating-item" v-for="reply in rating.replys">
                    <div class="user">
                      <img src="http://www.yihuyixi.com/ps/download/5959abcae4b00faa50475a11" width="20" height="20" alt="" class="avatar">
                      <span class="name">{{reply.from.userName | mix}}</span>
                    </div>
                    <div class="time">{{reply.createdAt | formatDate}}</div>
                    <p class="text">
                      {{reply.content}}
                    </p>
                  </li>
                </ul>
              </li>
            </ul>
            <div class="no-rating" v-show="!good.ratings || !good.ratings.length">暂无评论</div>
            <div class="more-rating" v-show="good.ratings && good.ratings.length" @click.stop.prevent="viewMore">———— 查看更多评论 ————</div>
          </div>
        </div>
        <split v-show="good.relates && good.relates.length"></split>
        <modal-title title="相关商品" moreText="更多" catKey="" catName="" v-show="good.relates && good.relates.length"></modal-title>
        <channel v-show="good.relates && good.relates.length" :items="good.relates || []" :cols="2"></channel>
        <split v-show="guessGoods.length"></split>
        <modal-title title="您可能还喜欢" moreText="更多" catKey="" catName="" v-show="guessGoods.length"></modal-title>
        <channel :items="guessGoods" :cols="2"></channel>
        <split v-if="showFollow"></split>
        <modal-title :title="aboutUs" catKey="" catName="" v-show="showFollow"></modal-title>
        <div v-if="showFollow" class="wx_follow">
          <img :src="wxqrcode" border="0" @click.stop.prevent="previewQrcode" />
        </div>
      </div>
      <gotop ref="top" @top="goTop" :scrollY="scrollY"></gotop>
    </div>
    <frame></frame>
    <layer :title="layer.title" :text="getQrcode" :btn="layer.button" ref="layerWin"></layer>
    <minicart ref="shopcart" :selectGoods="selectGoods" :max-items="3" @fireEmpty="doClear" @fireReload="doRefresh" :isAvailable="userProfile.hasFirst"></minicart>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue';
  import BScroll from 'better-scroll';
  import {mixUsername, formatDate, convertVideoUrl, reduceGoodsName} from '@/common/js/util';
  import cartcontrol from '@/components/cartcontrol/cartcontrol';
  import split from '@/components/split/split';
  import modalTitle from '@/components/modal-title/modal-title';
  import channel from '@/components/channel/channel';
  import ratingselect from '@/components/ratingselect/ratingselect';
  import fixedcart from '@/components/fixedtoolbar/fixedcart';
  import fixedheader from '@/components/fixedtoolbar/fixedheader';
  import frame from '@/components/common/myiframe';
  import gotop from '@/components/fixedtoolbar/gotop';
  import swipe from '@/components/swipe/quietswipe';
  import star from '@/components/star/star';
  import api from '@/api/api';
  import wx from 'weixin-js-sdk';
  import layer from '@/components/common/layer';
  import minicart from '@/components/cart/minicart';

  const ALL = 3;
  // const ERR_OK = 0;

  export default {
    activated() {
      this.$store.dispatch('reloadUserInfo');
      this.fetchData();
    },
    deactivated() {
      this.good.videoUrl = '';
      this.good.videos = [];
      this.guessGoods = [];
      this.hide();
      this.processing = false;
      this.lazyloaded = false;
    },
    updated() {
      if (this.good.content && !this.processing) {
        this.processing = true;
        this.lazyload();
        this.bindPictureEvent();
      }
      this._initScroll();
    },
    data() {
      return {
        scrollY: 0,
        good: {},
        firstpay: {},
        extFirstpay: {},
        lazyloaded: false,
        processing: false,
        previewImgList: [],
        guessGoods: [],
        selectType: ALL,
        onlyContent: true,
        desc: {
          all: '全部',
          positive: '好评',
          common: '中评',
          negative: '差评'
        },
        psCtx: api.CONFIG.psCtx,
        addedProducts: this.$store.getters.addedProducts,
        layer: {
          title: '快速检索，扫码定位商品',
          button: {
            text: '知道了!'
          }
        },
        showFollow: true,
        wxqrcode: api.CONFIG.wxqrcode,
        prefix: '_fp'
      };
    },
    computed: {
      swiperSlides() {
        let pics = this.good.pictures || [];
        let sliders = [];
        pics.forEach(pic => {
          if (pic) {
            if (pic.width < pic.height || pic.height / pic.width <= 1) {
              sliders.push({'thumbnail': api.CONFIG.psCtx + pic.id + '?w=750&h=500&v=v2', 'src': api.CONFIG.psCtx + pic.id});
            } else {
              sliders.push({'thumbnail': api.CONFIG.psCtx + pic.id + '?w=750&h=500', 'src': api.CONFIG.psCtx + pic.id});
            }
          } else {
            sliders.push({'thumbnail': api.CONFIG.defaultImg, 'src': api.CONFIG.defaultImg});
          }
        });
        return sliders;
      },
      getQrcode() {
        if (this.firstpay.id) {
          let uid = this.$store.getters.getUserInfo.userId;
          if (uid) {
            return `<img src="${api.CONFIG.cmsCtx}/qrcode/artwork?aid=${this.firstpay.id}&userId=${uid}&type=7" border="0" width="180" height="180" style="text-align: center; margin: -7px auto; display: block;"></img>`;
          } else {
            return `<img src="${api.CONFIG.cmsCtx}/qrcode/artwork?aid=${this.firstpay.id}&type=7" border="0" width="180" height="180" style="text-align: center; margin: -7px auto; display: block;"></img>`;
          }
        }
        return '';
      },
      getGoodPrice() {
        return this.firstpay.buttomFee;
      },
      getFrameHeight() {
        let width = document.documentElement.clientWidth || 375;
        return width / 4 * 3;
      },
      getVideoUrl() {
        let url = this.good.videoUrl;
        if (url) {
          return convertVideoUrl(`http://${url}`);
        } else {
          return 'about: blank';
        }
      },
      selectGoods() {
        let items = [];
        let goods = this.$store.getters.cartProducts;
        goods.forEach((product) => {
          if (product.count && product.type === this.prefix) {
            let o = {};
            Object.assign(o, product);
            items.push(o);
          }
        });
        return items;
      },
      userProfile() {
        return this.$store.getters.getUserProfile;
      },
      aboutUs() {
        return `关于「${api.CONFIG.APPNAME || '一虎一席茶生活美学商城'}」`;
      }
    },
    mounted() {
      this.scroller = this.$refs.good;
      window.onscroll = () => {
        this.scrollY = window.pageYOffset;
      };
    },
    methods: {
      fetchData() {
        let id = this.$route.params.id;
        if (!id) {
          return;
        }
        this.$store.dispatch('openLoading');
        let user = this.$store.getters.getUserInfo;
        let anon = '';
        if (!user.userId) {
          anon = this.$store.getters.getAnonymous;
        }
        api.getFirstpayGood(id, {
          type: 'firstpaydetail',
          stat: 1,
          unlogin: anon
        }).then(res => {
          let firstpay = res;
          this.firstpay = firstpay;
          if (typeof res.id === 'undefined') {
            this.$store.dispatch('closeLoading');
            this.$router.replace('/404');
            return;
          }
          api.GetGood(firstpay.artworkId).then(response => {
            let good = response;
            this.good = good;
            this.extendedGoodsAttrs(good);
            this.show();
            this.processing = false;
            this.$store.dispatch('closeLoading');
            this.wxReady();
            // this.fetchComments();
            this.getRelatedGoods();
            this.getLikeGoods();
          }).catch(response => {
            this.$store.dispatch('closeLoading');
          });
        }).catch(response => {
          this.$store.dispatch('closeLoading');
        });
      },
      extendedGoodsAttrs(good) {
        if (!this.firstpay.count) {
          Vue.set(this.firstpay, 'count', 0);
        }
        let sid = 'p' + this.prefix + this.firstpay.id;
        var qty = this.addedProducts && this.addedProducts[sid];
        this.firstpay.count = qty || 0;
        this.firstpay.pictures = good.pictures;
        this.firstpay.price = this.firstpay.buttomFee;
        this.firstpay.oldPrice = this.firstpay.fieldPrice;
        this.firstpay.extendId = this.prefix + this.firstpay.id;
        this.firstpay.type = this.prefix;
      },
      loadTencentPlayer() {
        if (!this.good.videoUrl) {
          return;
        }
      },
      wxshare() {
        this.$refs.weixinShare.show();
      },
      fetchComments() {
        api.getProductComments({
          currentPage: 1,
          pageSize: 5,
          productId: this.firstpay.artworkId || ''
        }).then(response => {
          this.good.ratings = response.comments;
          this._initScroll();
        });
      },
      _initScroll() {
        // this.$nextTick(() => {
        //   if (!this.scroll) {
        //     this.scroll = new BScroll(this.$refs.good, {
        //       click: true,
        //       bounce: false,
        //       probeType: 3
        //     });
        //   } else {
        //     this.scroll.refresh();
        //   }
        //   this.scroll.on('scroll', (pos) => {
        //     let offset = Math.abs(Math.round(pos.y));
        //     if (this.scrollY !== offset) {
        //       this.scrollY = offset;
        //     }
        //   });
        // });
      },
      bindPictureEvent() {
        if (this.lazyloaded) {
          let imgs = this.$refs.goodContent.getElementsByTagName('img');
          for (let j = 0; j < imgs.length; j++) {
            imgs[j].addEventListener('click',
              (e) => {
                let pic = (e.target || e.srcElement).src;
                if (pic) {
                  pic = pic.substring(0, pic.lastIndexOf('?'));
                  wx.previewImage({
                    current: pic,
                    urls: this.previewImgList
                  });
                }
            }, false);
          }
        }
      },
      getLikeGoods() {
        let kw = '';
        let cat = '';
        if (this.good.keyword.length) {
          kw = this.good.keyword.join(',');
        } else {
          cat = this.good.artworkCategory.parent.name;
        }
        api.GetGoods({
          artworkTypeName: 'tea',
          currentPage: 1,
          pageSize: 12,
          keyword: kw,
          categoryParentName: cat || '',
          pid: this.firstpay.artworkId,
          commodityStatesId: 2,
          scoreSort: true
        }).then((response) => {
          let list = response.artworks;
          this.removeDups(list, this.good.relates || []);
          this.guessGoods = list;
          setTimeout(() => {
            this._initScroll();
          }, 800);
        });
      },
      getRelatedGoods() {
        let ids = [];
        if (this.good.relates && this.good.relates.length) {
          this.good.relates.forEach((item) => {
            ids.push(item.id);
          });
        }
        if (!ids.length) {
          return;
        }
        api.GetRelatedGoods({
          relatedid: ids.join(',')
        }).then((response) => {
          this.good.relates = response || [];
          setTimeout(() => {
            this._initScroll();
          }, 800);
        });
      },
      removeDups(goods, relates) {
        if (!goods.length || !relates.length) {
          return;
        }
        for (let i = 0; i < goods.length; i++) {
          let good = goods[i];
          relates.forEach((item) => {
            if (good.id === item.id) {
              goods.splice(i, 1);
              i--;
            }
          });
        }
      },
      getWXFollow() {
        let user = this.$store.getters.getUserInfo;
        if (!user.userId) {
          this.showFollow = true;
          return;
        }
        api.getUserProfile(user.userId || 0).then(response => {
          if (response.result === 0 && response.user) {
            this.showFollow = (response.user.follow === 0 || response.user.follow === 2);
          }
        }).catch(response => {
          console.error(response);
        });
      },
      show() {
        this.$store.commit('HIDE_FOOTER');
        this._initScroll();
      },
      hide() {
        this.$store.commit('SHOW_FOOTER');
      },
      back() {
        this.$router.back();
      },
      showQrcode() {
        this.$refs.layerWin.show();
      },
      doClear() {
        this.firstpay.count = 0;
      },
      doRefresh(target) {
        let newCount = 0;
        this.$store.getters.cartProducts.forEach(product => {
          if (product.id === this.firstpay.id) {
            newCount = product.count || 0;
          }
        });
        this.firstpay.count = newCount;
      },
      addFirst(event) {
        Vue.set(this.firstpay, 'count', 1);
        this._drop(event.target);
        this.$store.commit('ADD_QUANTITY', this.prefix + this.firstpay.id);
        this.$store.dispatch('addToCart', this.firstpay);
      },
      addGood(target) {
        this._drop(target);
      },
      _drop(target) {
        // 优化体验，异步执行小球下落动画
        this.$nextTick(() => {
          this.$refs.shopcart.drop(target);
        });
      },
      selectRating(type) {
        this.selectType = type;
        this.$nextTick(() => {
          this.scroll.refresh();
        });
      },
      toggleContent() {
        this.onlyContent = !this.onlyContent;
        this.$nextTick(() => {
          this.scroll.refresh();
        });
      },
      needShow(type, text) {
        if (this.onlyContent && !text) {
          return false;
        }
        return true;
      },
      getThumbnail(id) {
        if (id) {
          return api.CONFIG.psCtx + id + '?w=90&h=90';
        } else {
          return api.CONFIG.defaultImg;
        }
      },
      getPicture(id) {
        if (id) {
          return api.CONFIG.psCtx + id;
        } else {
          return api.CONFIG.defaultImg;
        }
      },
      getPicCls(rating) {
        let plen = rating.pictures.length;
        if (plen === 1 || plen === 2 || plen === 4) {
          return 'p50';
        } else {
          return 'p30';
        }
      },
      previewImg(pics, pic) {
        let imgs = [];
        for (let i = 0; i < pics.length; i++) {
          imgs.push(this.getPicture(pics[i].pid));
        }
        wx.previewImage({
          current: this.getPicture(pic.pid),
          urls: imgs
        });
      },
      previewQrcode() {
        wx.previewImage({
          current: this.wxqrcode,
          urls: [this.wxqrcode]
        });
      },
      viewMore() {
        this.$router.push({name: 'goodComment', params: {id: this.good.id}});
      },
      getThumbnailPic(item) {
        let pic = item.pictures;
        if (pic && pic.length) {
          return api.CONFIG.psCtx + pic[0].id + '?w=750&h=500';
        } else {
          return api.CONFIG.defaultImg;
        }
      },
      wxReady() {
        api.wxsignature(encodeURIComponent(location.href.split('#')[0])).then(response => {
          wx.config({
            // debug: true, // 开启调试模式
            appId: response.appId,      // 必填，公众号的唯一标识
            timestamp: response.timestamp,  // 必填，生成签名的时间戳
            nonceStr: response.nonceStr,   // 必填，生成签名的随机串
            signature: response.signature,  // 必填，签名，见附录1
            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
          });
        });
        let redirect = 'http://' + location.host + '/weixin/fp/' + this.firstpay.id;
        let user = this.$store.getters.getUserInfo;
        if (user.userId) {
          redirect += '?userId=' + user.userId;
        }
        let img = api.CONFIG.psCtx + '5959aca5e4b00faa50475a18?w=423&h=423';
        if (this.firstpay.icon) {
          img = api.CONFIG.psCtx + this.firstpay.icon;
        } else if (this.good.pictures && this.good.pictures.length) {
          img = api.CONFIG.psCtx + this.good.pictures[0].id + '?w=423&h=423';
        }
        let vm = this;
        let shareData = {
          title: `[${api.CONFIG.NICKNAME || '一虎一席'}.首单3折${this.firstpay.buttomFee}元] ` + reduceGoodsName(this.firstpay.name),
          desc: `首单价：¥${this.firstpay.buttomFee}, 市场价：¥${this.firstpay.fieldPrice}.【${api.CONFIG.APPNAME || '一虎一席茶生活美学商城'}】(从此轻松买·好茶好茶器)`,
          link: redirect,
          imgUrl: img,
          success: function () {
            vm.$refs.weixinShare.hideDialog();
          }
        };
        wx.ready(function() {
          wx.onMenuShareTimeline(shareData);
          wx.onMenuShareAppMessage(shareData);
        });
      },
      lazyload() {
        let w = window.innerWidth;
        let picImgList = [];
        let imgs = this.$refs.goodContent.getElementsByTagName('img');
        let prefix = api.CONFIG.cdnCtx;
        let html = this.good.content;
        for (let i = 0; i < imgs.length; i++) {
          let img = imgs[i];
          let src = img.getAttribute('data-original');
          if (src) {
            let width = img.getAttribute('width');
            let height = img.getAttribute('height');
            let key = 'img class="lazy" data-original="' + src + '" src=""';
            let suffix = '';
            if (width) {
              suffix += ' width="' + width + '"';
            }
            if (height) {
              suffix += ' height="' + height + '"';
            }
            let key2 = key + ' alt=""' + suffix;
            key += suffix;
            if (src.indexOf('http:') < 0) {
              src = prefix + src;
            } else {
              src = src.replace('http://www.yihuyixi.com', prefix);
            }
            if (src.lastIndexOf('?') < 0) {
              src += '?1';
            }
            src = src + '&w=750';
            html = html.replace(key, 'img src="' + src + '" width="' + w + '" style="margin-left: -14px; margin-bottom: -4.3px;"').replace(key2, 'img src="' + src + '" width="' + w + '" style="margin-left: -14px; margin-bottom: -4.3px;"');
            if (width && width > 100) {
              picImgList.push(src.substring(0, src.lastIndexOf('?')));
            } else if (width === null) {
              picImgList.push(src.substring(0, src.lastIndexOf('?')));
            }
          } else {
            if (!picImgList.length) {
              return;
            }
            let pic = img.getAttribute('src');
            let width = img.getAttribute('width');
            let height = img.getAttribute('height');
            let suffix = '';
            if (width) {
              suffix += ' width="' + width + '"';
            }
            if (height) {
              suffix += ' height="' + height + '"';
            }
            let p1 = suffix + ' alt="" src="' + pic + '"';
            let p2 = suffix + ' src="' + pic + '"';
            if (pic.indexOf('http:') < 0) {
              pic = prefix + pic;
            }
            if (pic.lastIndexOf('?') < 0) {
              pic += '?1';
            }
            pic = pic + '&w=750';
            html = html.replace(p1, ' src="' + pic + '" width="' + w + '" style="margin-left: -14px; margin-bottom: -4.3px;"').replace(p2, 'img src="' + pic + '" width="' + w + '" style="margin-left: -14px; margin-bottom: -4.3px;"');
            if (width && width > 100) {
              picImgList.push(pic.substring(0, pic.lastIndexOf('?')));
            } else if (width === null) {
              picImgList.push(pic.substring(0, pic.lastIndexOf('?')));
            }
          }
        }
        if (picImgList.length) {
          this.previewImgList = picImgList;
          this.lazyloaded = true;
          this.processing = false;
        }
        this.good.content = html;
      },
      goTop() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }
    },
    filters: {
      formatDate(time) {
        return formatDate(time);
      },
      mix(name) {
        return mixUsername(name);
      }
    },
    components: {
      cartcontrol, split, ratingselect, fixedcart, fixedheader, swipe, star, modalTitle, channel, frame, gotop, layer, minicart
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import '../../common/stylus/mixin'

  .good
    position: absolute
    top: 44px
    bottom: 48px
    width: 100%
    background: #fff
    &.move-enter-active, &.move-leave-active
      transition: all 0.2s linear
      transform: translate3d(0, 0, 0)
    &.move-enter, &.move-leave-active
      transform: translate3d(100%, 0, 0)
    .image-header
      position: relative
      width: 100%
      .swiper-container
        height: auto
      img
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
      .back
        position: absolute
        top: 10px
        left: 10px
        border-radius: 50%
        background: rgba(7, 17, 27, 0.4)
        .icon-arrow_lift
          display: block
          padding: 6px 6px 6px 4px
          font-size: 18px
          color: #fafafa
    .good-content
      position: relative
      width: 100%
      padding-bottom: 80px
      overflow: auto
      box-sizing: border-box
      -webkit-overflow-scrolling: touch
      .channel
        display: flex
        flex-wrap: wrap
        margin-left: 5px
        .chanel-item
          position: relative
          width: 33.3%
          height: auto
          vertical-align: top
          box-sizing: border-box
          padding-bottom: 10px
          &.p50
            width: 50%
            .item-img img
              width: 48vw
              height: auto
          &.p100
            width: 100%
            .item-img img
              width: 100%
              height: auto
          .item-img
            position: relative
            width: 100%
            min-height: 102px
            overflow: hidden
            img
              width: 31.5vw
              height: auto
          .item-info
            position: relative
            width: 100%
            padding-right: 40px
            box-sizing: border-box
            h3
              line-height: 1.5
              height: 20px
              font-size: 14px
              overflow: hidden
              text-overflow: ellipsis
              display: -webkit-box
              -webkit-line-clamp: 1
              -webkit-box-orient: vertical
            .price
              margin-top: 1px
              color: #ff463c
              font-size: 14px
              font-weight: 700
              white-space: nowrap
              overflow: hidden
              text-overflow: ellipsis
            .icon
              position: absolute
              top: 50%
              margin-top: -20px
              right: 0
              width: 40px
              height: 40px
              line-height: 40px
              text-align: center
              font-size: 20px
              box-sizing: border-box
              .icon-favorite
                color: #ff463c
    .content
      position: relative
      padding: 16px 18px 15px 14px
      .title
        line-height: 17px
        margin-bottom: 2px
        font-size: 14px
        font-weight: 700
        color: rgb(7, 17, 27)
        overflow: hidden
        text-overflow: ellipsis
        display: -webkit-box
        -webkit-line-clamp: 2
        -webkit-box-orient: vertical
      .detail
        margin: 5px 0 0
        font-size: 0
        .stock, .rating, .follower
          font-size: 10px
          color: rgb(147, 153, 159)
        .stock
          display: inline-block
          font-size: 12px
      .price
        font-weight: 700
        line-height: 18px
        .now
          margin-right: 8px
          font-size: 14px
          font-weight: 700
          color: rgb(240, 20, 20)
        .old
          text-decoration: line-through
          font-size: 12px
          color: rgb(147, 153, 159)
      .delivery-annouce
        font-size: 12px
        color: rgb(147, 153, 159)
        margin: 2px 0 0
      .cartcontrol-wrapper
        position: absolute
        right: 12px
        top: 50%
        margin-top: -16px
      .buy
        position: absolute
        right: 12px
        top: 50%
        margin-top: -12px
        z-index: 10
        height: 24px
        line-height: 24px
        padding: 0 12px
        box-sizing: border-box
        font-size: 10px
        border-radius: 12px
        color: #fff
        background: rgb(0, 160, 220)
        transition: all 0.2s
        &.fade-enter-active, &.fade-leave-active
          opacity: 1
        &.fade-enter, &.fade-leave-active
          opacity: 0
    .sku-wrap
      position: relative
      padding: 10px 18px
      .sku
        position: relative
        height: 40px
        font-size: 12px
        label
          position: relative
          display: inline-block
          height: 40px
          line-height: 40px
          min-width: 75px
          color: #666
        span
          position: relative
          display: inline-block
          vertical-align: bottom
    .info, .intro
      position: relative
      margin-bottom: 10px
      .title
        position: relative
        padding: 10px 18px 10px 14px
        line-height: 14px
        font-size: 14px
        color: rgb(7, 17, 27)
        background-color: #fff
        .toolbar
          position: absolute
          display: inline-block
          right: 0
          top: 0
          width: auto
          height: 34px
          line-height: 34px
          padding-right: 8px
          box-sizing: border-box
          i
            font-size: 20px
            vertical-align: middle
            color: #666
      .text, .player
        font-size: 14px
        color: rgb(77, 85, 93)
        line-height: 1.3
        box-sizing: border-box
        overflow-x: hidden
        background-color: #fff
        position: relative
      #tencent_video_player
        width: 100%
        height: auto
        overflow: hidden
        video
          object-fit: cover
      .text
        padding-left: 14px
        padding-right: 10px
      .sellpoint
        padding: 0 10px 0 14px
        font-size: 14px
        color: #4d555d
        overflow: hidden
        text-overflow: ellipsis
        display: -webkit-box
        line-height: 1.3
        -webkit-box-orient: vertical
      .zoompic
        margin-left: -14px
      .table
        width: 100%
        max-width: 100%
        order-spacing: 0
        border-collapse: collapse
        border-bottom: solid 1px #e7e7e7
        border-left: solid 1px #e7e7e7
        word-wrap: break-word
        word-break: break-all
        tr
          display: flex
        td, th
          border-top: solid 1px #e7e7e7
          border-right: solid 1px #e7e7e7
          padding: 10px 5px 10px 8px
          color: #848689
          font-size: 13px
          &:first-child
            width: 75px
        .adjustText
          flex: 1
    .intro
      margin-bottom: 5px
    .row
      position: relative
      display: flex
      margin-top: 5px
      color: #666
      .label
        display: block
        float: left
        font-size: 13px
      .desc
        flex: 1
        font-size: 13px
        oveflow: hidden
    .rating
      position: relative
      .title
        line-height: 14px
        padding: 10px 14px
        font-size: 14px
        color: rgb(7, 17, 27)
        background-color: #fff
      .rating-wrapper
        position: relative
        padding: 0 14px
        background-color: #fff
        .rating-item
          position: relative
          padding: 16px 0
          clear: both
          .reply-item
            margin-left: 20px
          .user
            position: absolute
            left: 0
            top: 20px
            font-size: 0
            height: 25px
            line-height: 25px
            .name
              display: inline-block
              margin-left: 3px
              vertical-align: top
              font-size: 10px
              color: rgb(147, 153, 159)
              line-height: 20px
            .avatar
              border-radius: 50%
          .time
            line-height: 30px
            font-size: 10px
            color: rgb(147, 153, 159)
            text-align: right
          .text
            line-height: 16px
            font-size: 12px
            color: rgb(7, 17, 27)
            .icon-thumb_up, .icon-thumb_down
              margin-right: 4px
              line-height: 16px
              font-size: 12px
            .icon-thumb_up
              color: rgb(0, 160, 220)
            .icon-thumb_down
              color: rgb(147, 153, 159)
          .piclist
            position: relative
            width: 100%
            min-height: 95px
            padding: 5px 0
            clear: both
            li
              display: block
              float: left
              width: 100%
              height: 90px
              margin-right: 3px
              margin-bottom: 5px
              &.p50
                width: 45%
              &.p30
                width: 30%
        .no-rating
          padding-bottom: 10px
          font-size: 12px
          color: rgb(147, 153, 159)
        .more-rating
          padding: 6px 0
          font-size: 12px
          color: rgb(147, 153, 159)
          text-align: center
    .wx_follow
      position: relative
      width: 100%
      height: auto
      overflow: hidden
      img
        position: relative
        width: 100%
        height: auto
</style>
